import React from "react";
import { Button, Divider, List, Popover, Typography } from "antd";
import { useProjects } from "utils/project";
import styled from "@emotion/styled";
import { useProjectModal } from "screens/project-list/util";

export const PropoverMent = () => {
  const { open } = useProjectModal();
  const { data: projects, refetch } = useProjects();
  const pinnedProject = projects?.filter((projects) => projects.pin);

  const content = (
    <Container>
      <Typography.Text type="secondary">收藏项目</Typography.Text>
      <List>
        {pinnedProject && pinnedProject.length > 0
          ? pinnedProject?.map((item) => (
              <List.Item>
                <List.Item.Meta title={item.name} />
              </List.Item>
            ))
          : "暂无收藏"}
      </List>
      <Divider />
      <Button style={{ padding: 0 }} type="link" onClick={open}>
        创建项目
      </Button>
    </Container>
  );
  return (
    <Popover
      onVisibleChange={() => refetch()}
      placement="bottom"
      content={content}
    >
      <span>项目</span>
    </Popover>
  );
};

const Container = styled.div`
  min-width: 30rem;
`;
